{% extends 'base.html' %}
{% load static %}

{% block title %}客户仪表板 - 维修管理系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">客户仪表板</h1>
            <p class="text-muted">欢迎回来，{{ user.get_full_name|default:user.username }}！</p>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <!-- 工单统计 -->
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">总工单</h5>
                    <h2 class="card-text">{{ ticket_stats.total }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <h5 class="card-title">待处理</h5>
                    <h2 class="card-text">{{ ticket_stats.pending }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">处理中</h5>
                    <h2 class="card-text">{{ ticket_stats.in_progress }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">已完成</h5>
                    <h2 class="card-text">{{ ticket_stats.completed }}</h2>
                </div>
            </div>
        </div>

        <!-- 设备统计 -->
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <h5 class="card-title">总设备</h5>
                    <h2 class="card-text">{{ asset_stats.total }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">正常设备</h5>
                    <h2 class="card-text">{{ asset_stats.active }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3 mb-3">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <h5 class="card-title">维修中</h5>
                    <h2 class="card-text">{{ asset_stats.maintenance }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">快速操作</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2 d-md-flex">
                        <a href="{% url 'tickets:ticket_create' %}" class="btn btn-primary me-md-2">
                            <i class="bi bi-plus-circle"></i> 创建新工单
                        </a>
                        <a href="{% url 'tickets:ticket_list_mine' %}" class="btn btn-outline-primary me-md-2">
                            <i class="bi bi-list-check"></i> 查看我的工单
                        </a>
                        <a href="{% url 'assets:asset_list_mine' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-pc-display"></i> 查看我的设备
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最新动态 -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">最新工单</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        {% for ticket in recent_tickets|slice:":5" %}
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1">{{ ticket.title }}</h6>
                                <small class="text-{% if ticket.status == 'pending' %}warning{% elif ticket.status == 'in_progress' %}info{% elif ticket.status == 'completed' %}success{% else %}secondary{% endif %}">
                                    {{ ticket.get_status_display }}
                                </small>
                            </div>
                            {% if ticket.ticket_number %}
                            <small class="text-muted">工单号: {{ ticket.ticket_number }}</small><br>
                            {% endif %}
                            <p class="mb-1 text-muted small">{{ ticket.description|truncatewords:10 }}</p>
                            <small class="text-muted">创建时间: {{ ticket.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        {% empty %}
                        <div class="text-center text-muted py-3">
                            暂无工单记录
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">系统通知</h5>
                </div>
                <div class="card-body">
                    {% if notifications %}
                        {% for notification in notifications %}
                        <div class="alert alert-{{ notification.get_priority_class }} mb-2">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="alert-heading mb-1">{{ notification.title }}</h6>
                                    <p class="mb-0 small">{{ notification.content|truncatewords:15 }}</p>
                                </div>
                                <small class="text-muted">{{ notification.created_at|date:"m-d H:i" }}</small>
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="text-center text-muted py-3">
                            <i class="bi bi-bell" style="font-size: 2rem;"></i>
                            <p class="mt-2 mb-0">暂无通知</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
